<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>智能课堂 - www.zhinengshe.com</title>

<style>
*{margin:0;padding:0;}
#pingfen{ width:142px;margin:10px auto;height:28px;}
#pingfen li{ width:14px;float:left;height:28px; cursor:pointer;background:url(star.gif) no-repeat 0 0; list-style:none;}
#pingfen .on{ width:14px;float:left;height:28px; cursor:pointer;background:url(star.gif) no-repeat -14px 0; list-style:none;}
#pingfen .on1{ width:14px;float:left;height:28px; cursor:pointer;background:url(star.gif) no-repeat -14px -29px; list-style:none;}
#pingfen .re{ width:14px;float:left;height:28px; cursor:pointer;background:url(star.gif) no-repeat 0 -29px; list-style:none;}
</style>
<script>
window.onload=function()
{
	var oDiv=document.getElementById('pingfen');
	var oUl=oDiv.children[0];
	var aLi=oUl.children;
	var i=0;
	
	for(i=0;i<aLi.length;i++)
	{
		aLi[i].index=i;
		if(i%2==1)
		{
		   aLi[i].className='on';
		}
	    //这么写他的class为什么又会变成默认？就算从新写个新循环为什么也不可以？
		/*aLi[i].onmouseover=function()
		{
			this.style.background='url(star.gif) no-repeat -14px -28px'
		};*/
		aLi[i].onmouseover=function()
	    {
			 
		    

			  for(i=0;i<this.index+1;i++)
			 {
						   if(i%2==1)
						{
						    aLi[i].className='on1';	
						}
						else
						{
						   aLi[i].className='re';
						}	 
			 }

		};
		aLi[i].onmouseout=function()
		{
					for(i=0;i<aLi.length;i++)
			 {
					   if(i%2==1)
					{
						aLi[i].className='on';	
					}
					else
					{
					   aLi[i].className='';
					}	 
			 }
			
		};
		aLi[i].onclick=function()
		{
		  
		  for(i=0;i<aLi.length;i++)
		  {
			//IE 为什么不兼容？
			//FF & Chrome就兼容？点击后ie的表现为所有的星星消失，而别的没事。
		  	aLi[i].onmouseover=null;
			aLi[i].onmouseout=null;
			aLi[i].onclick=null;
		  }
		  alert('您提交的评分是'+(this.index+1)/2+'分');
		}
	};	
};

</script>

</head>

<body>
<div id="pingfen">
	<ul>
    	<li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>
